<template>
  <div>
    <h2>旋转时钟</h2>
    <div class="clock-warpper">
      <div class="months">
        <div
          class="count-item"
          v-for="(item, index) in months"
          :key="index"
          :style="getMonthStyle(item,index)"
        ><div>{{item}}</div></div>
      </div>
      <div class="days">
        <div
          class="count-item"
          v-for="(item, index) in days"
          :key="index"
          :style="getDaysStyle(item,index)"
        ><div>{{item}}</div></div>
      </div>
      <div class="hours">
        <div
          class="count-item"
          v-for="(item, index) in hours"
          :key="index"
          :style="getStyle(item,index)"
        ><div>{{item}}点</div></div>
      </div>
      
      <div class="minutes">
        <div
          class="count-item"
          v-for="(item, index) in minutes"
          :key="index"
          :style="getMinutesStyle(item,index)"
        ><div>{{item}}</div></div>
      </div>
      <div class="seconds">
        <div
          class="count-item"
          v-for="(item, index) in minutes"
          :key="index"
          :style="getSecondsStyle(item,index)"
        ><div>{{item}}</div></div>
      </div>
    </div>
    <!-- 组件方式实现时钟 -->
    <!-- <div style="position: absolute;">
      <ClockItem :level="1" @changeAdd="carry" :total="12" currentItem="1"></ClockItem>
    </div>
    <div style="position: absolute;">
      <ClockItem :level="2" :total="31" currentItem="1"></ClockItem>
    </div>
    <div style="position: absolute;">
      <ClockItem :level="3" :total="24" currentItem="1"></ClockItem>
    </div>
    <div style="position: absolute;">
      <ClockItem :level="4" :total="60" currentItem="1"></ClockItem>
    </div>
    <div style="position: absolute;">
      <ClockItem :level="5" :total="60" currentItem="1"></ClockItem>
    </div> -->
  </div>
</template>

<script>
// import ClockItem from './ClockItem'

export default {
  name: "RotationClock",
  // components: {
  //   ClockItem
  // },
  data() {
    return {
      months: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ],

      hours: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
      ],
      minutes: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
        "32",
        "33",
        "34",
        "35",
        "36",
        "37",
        "38",
        "39",
        "40",
        "41",
        "42",
        "43",
        "44",
        "45",
        "46",
        "47",
        "48",
        "49",
        "50",
        "51",
        "52",
        "53",
        "54",
        "55",
        "56",
        "57",
        "58",
        "59"
      ],
      currentTime: {
        month: 2,
        day: 1,
        hour: 0,
        minute: 0,
        second: 0
      },
      clockInterval: ''
    };
  },
  created(){
    this.clockInterval = setInterval(() =>{
      if(this.currentTime.second < 60){
        this.currentTime.second ++;
      }else{
        this.currentTime.second = 0;
        if(this.currentTime.minute <= this.minutes.length - 1){
          this.currentTime.minute ++;
        }else{
          this.currentTime.minute = 0;
          if(this.currentTime.hour <= this.hours.length - 1){
            this.currentTime.hour ++;
          }else{
            this.currentTime.hour = 0;
            if(this.currentTime.day <= this.days.length - 1){
              this.currentTime.day ++;
            }else{
              this.currentTime.day = 1;
              if(this.currentTime.month <= this.months.length - 1){
                this.currentTime.month ++;
              }else{
                this.currentTime.month = 1;
                
              }
            }
          }
        }
        // this.carry(this.currentItemValue)
      }
      console.log(this.currentTime.second)
    },1)
  },
  destroyed(){
    clearInterval(this.clockInterval)
  },
  methods: {
    getMonthStyle(item, index) {
      let angle = ((index - this.currentTime.month + 1) * 360) / 12;
      return `transform:rotate(${angle}deg); transform-origin: -50px 0;`;
    },
    getDaysStyle(item, index) {
      let angle = ((index - this.currentTime.day + 1) * 360 ) / this.days.length;
      return `transform:rotate(${angle}deg); transform-origin: -100px 0;`;
    },
    getStyle(item, index) {
      let angle = ((index - this.currentTime.hour) * 360) / 24;
      return `transform:rotate(${angle}deg); transform-origin: -150px 0;`;
    },
    getMinutesStyle(item, index) {
      let angle = ((index - this.currentTime.minute) * 360) / 60;
      return `transform:rotate(${angle}deg); transform-origin: -200px 0;`;
    },
    getSecondsStyle(item, index) {
      let angle = ((index - this.currentTime.second) * 360) / 60;
      return `transform:rotate(${angle}deg); transform-origin: -250px 0;`;
    },
    carry(val){
      console.log("传递到父组件的数据：",val)
    }
  },
  watch:{
    "this.currentTime.second" : (old, value)=>{
      this.currentTime.second = value
    },
    "this.currentTime.minute" : (old, value)=>{
      this.currentTime.minute = value
    },
    "this.currentTime.hour" : (old, value)=>{
      this.currentTime.hour = value
    },
    "this.currentTime.day" : (old, value)=>{
      this.currentTime.day = value
    },
    "this.currentTime.month" : (old, value)=>{
      this.currentTime.month = value
    },
  },
  computed: {
    days(){
      let days = [];
      switch(this.currentTime.month){
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
          for(let i = 1; i < 32; i++ ){
            days.push(i);
          }
          break;
        case 2:
          for(let i = 1; i < 29; i++ ){
            days.push(i);
          }
          break;
        default:
          for(let i = 1; i < 31; i++ ){
            days.push(i);
          }
          break;
      }
      
      return days;
    }
  }
};
</script>

<style>
.months{
  position: absolute;
  top: 300px;
  left: 400px;
}
.days{
  position: absolute;
  top: 300px;
  left: 450px;
}
.hours{
  position: absolute;
  top: 300px;
  left: 500px;
}
.minutes{
  position: absolute;
  top: 300px;
  left: 550px;
}
.seconds{
  position: absolute;
  top: 300px;
  left: 600px;
}
.clock-warpper {
  position: relative;
  height: 600px;
  width: 600px;
  left: 50%;
  top: 50%;
  transform:translate(-300px,0)
}
.count-item {
  height: 20px;
  width:100px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.count-item > div{
  display: block;
  /* transform:rotate(-90deg); */
}
</style>